<template>
    <div class="body">
        <div class="header">
            <headerNav></headerNav>
        </div>
       <div class="container">
           <leftCard id="first"></leftCard>
           <rightCard id="second"></rightCard>
       </div>
    </div>
</template>

<script>
    import headerNav from "../../components/nav/headerNav";
    import leftCard from "../../components/card/leftCard";
    import rightCard from "../../components/card/rightCard";
    export default {
        name: "personalView",
        components:{
            headerNav,
            leftCard,
            rightCard
        }
    }
</script>

<style scoped>
    .body{
        height: 100%;
        background-image: url("../../assets/img/personal.jpg");
        background-size: 100% 100%;
    }
    .header{
        margin-bottom: 12px;
    }
    .container{

        display: flex;
        width: 100%;
        height: 90%;
    }
    #first{
        background-image: url("../../assets/img/left-card.jpg");
        background-size: 100% 100%;
        height: 100%;
        width: 30%;

    }
    #second{
        background-image: url("../../assets/img/right-card1.jpg");
        background-size: 100% 100%;
        height: 100%;
        width: 70%;
    }
</style>
